.mini-drawer.ltr,
.mini-drawer.rtl,
.mini-drawer__container {
  // top: 0;
  // bottom: 0;
  // height: 100%;
}
.mini-drawer.btt,
.mini-drawer.ttb,
.mini-drawer__container {
  // left: 0;
  // right: 0;
  // width: 100%;
}
@-webkit-keyframes mini-drawer-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes mini-drawer-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rtl-mini-drawer-in {
  0% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes rtl-mini-drawer-in {
  0% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes rtl-mini-drawer-out {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}
@keyframes rtl-mini-drawer-out {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}
@-webkit-keyframes ltr-mini-drawer-in {
  0% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes ltr-mini-drawer-in {
  0% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes ltr-mini-drawer-out {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
}
@keyframes ltr-mini-drawer-out {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
}
@-webkit-keyframes ttb-mini-drawer-in {
  0% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes ttb-mini-drawer-in {
  0% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes ttb-mini-drawer-out {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }
}
@keyframes ttb-mini-drawer-out {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }
}
@-webkit-keyframes btt-mini-drawer-in {
  0% {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes btt-mini-drawer-in {
  0% {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes btt-mini-drawer-out {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
}
@keyframes btt-mini-drawer-out {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
}
.mini-drawer {
  // position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  outline: 0;
}
.mini-drawer.rtl {
  -webkit-animation: rtl-mini-drawer-out 0.3s;
  animation: rtl-mini-drawer-out 0.3s;
  right: 0;
}
.mini-drawer__open .mini-drawer.rtl {
  -webkit-animation: rtl-mini-drawer-in 0.3s 1ms;
  animation: rtl-mini-drawer-in 0.3s 1ms;
}
.mini-drawer.ltr {
  -webkit-animation: ltr-mini-drawer-out 0.3s;
  animation: ltr-mini-drawer-out 0.3s;
  left: 0;
  .el-dialog__close {
    transform: rotate(180deg);
  }
}
.mini-drawer__open .mini-drawer.ltr {
  -webkit-animation: ltr-mini-drawer-in 0.3s 1ms;
  animation: ltr-mini-drawer-in 0.3s 1ms;
}
.mini-drawer.ttb {
  -webkit-animation: ttb-mini-drawer-out 0.3s;
  animation: ttb-mini-drawer-out 0.3s;
  top: 0;
  .el-dialog__close {
    transform: rotate(90deg);
  }
}
.mini-drawer__open .mini-drawer.ttb {
  -webkit-animation: ttb-mini-drawer-in 0.3s 1ms;
  animation: ttb-mini-drawer-in 0.3s 1ms;
}
.mini-drawer.btt {
  -webkit-animation: btt-mini-drawer-out 0.3s;
  animation: btt-mini-drawer-out 0.3s;
  bottom: 0;

  .el-dialog__close {
    transform: rotate(270deg);
  }
}
.mini-drawer__open .mini-drawer.btt {
  -webkit-animation: btt-mini-drawer-in 0.3s 1ms;
  animation: btt-mini-drawer-in 0.3s 1ms;
}
.mini-drawer__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
}
.mini-drawer__header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #72767b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  padding: 8px 10px 8px 10px;
  background: #004aaa;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}
.mini-drawer__header > :first-child {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.mini-drawer__title {
  margin: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  line-height: inherit;
  font-size: 1rem;
}
.mini-drawer__close-btn {
  border: none;
  cursor: pointer;
  // font-size: 16px;
  color: inherit;
  background-color: transparent;
  padding: 0px;

  .icon-25 {
    font-size: 25px;
  }
}
.mini-drawer__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: auto;
}
.mini-drawer__body > * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.mini-drawer__container {
  // position: relative;
  position: fixed;
  overflow: hidden; // 添加overflow hidden，移动动画移动时超出会自动影藏，否则移动时能看到移动的部分，如果需要看到整体移动部分，则注释掉该样式
}
.mini-drawer-fade-enter-active {
  -webkit-animation: mini-drawer-fade-in 0.3s;
  animation: mini-drawer-fade-in 0.3s;
}
.mini-drawer-fade-leave-active {
  animation: mini-drawer-fade-in 0.3s reverse;
}
